<!-- 用户管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 用户列表 -->
      <el-col>
        <el-card shadow="hover" class="data-table">
          <el-table
            v-loading="loading"
            :data="pageData"
            border
            stripe
            highlight-current-row
            class="data-table__content"
            align="center"
            @selection-change="handleSelectionChange"
          >
            <!-- 自定义空状态 -->
            <template #empty>
              <div style="padding: 60px 0; text-align: center">
                <el-empty description="暂无数据" />
              </div>
            </template>
            <el-table-column label="ID" prop="id" align="center" width="60" />
            <el-table-column label="内容" prop="content" align="center" />
            <el-table-column label="用户ID" prop="userId" align="center" />
            <el-table-column label="投诉人" prop="name" align="center" />
            <el-table-column label="投诉人号码" prop="phone" align="center" />
            <el-table-column label="创建时间" align="center" prop="createTime" />
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.page"
            v-model:limit="queryParams.pageSize"
            @pagination="fetchData"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import FeedbackAPI from "@/api/system/feedback";
defineOptions({
  name: "FeedbackList",
  inheritAttrs: false,
});

const queryParams = reactive({
  page: 1,
  pageSize: 10,
  name: "",
});

const pageData = ref<any[]>([]);
const total = ref(0);
const loading = ref(false);
const selectIds = ref<number[]>([]);

// 选中项发生变化
function handleSelectionChange(selection: any[]) {
  selectIds.value = selection.map((item) => item.id);
}

// 获取数据
async function fetchData() {
  loading.value = true;
  try {
    const data = await FeedbackAPI.list(queryParams);
    console.log(data);
    pageData.value = data.data.records;
    total.value = data.data.total;
  } finally {
    loading.value = false;
  }
}

// 查询（重置页码后获取数据）
function handleQuery() {
  queryParams.page = 1;
  fetchData();
}

onMounted(() => {
  handleQuery();
});
</script>
